import { useState } from "react";
import c from "./home.module.scss";
import { Button, Col, Row, Space } from "antd";
import viteLogo from '/vite.svg'
import { CheckCircleTwoTone, HeartTwoTone, SmileTwoTone } from '@ant-design/icons';
export const Home = () => {
    const [isShhow, setIsShow] = useState(true)
    const [count] = useState(0)
    const handleClick = () => {
        setIsShow(!isShhow);
    }
    return (


        <>
            <div className={c.home}>
                <div>
                    <Button type='primary' onClick={handleClick}>按钮 {count}</Button>
                </div>
                <img className={c.imgs} src={viteLogo} alt="" />
                <span className={c.one}>4554</span>
                {
                    isShhow && <span>ddf</span>
                }
            </div>

            <div>
                <Row justify='space-between' className={c.rows}>
                    {new Array(15).fill(0).map((_, index) => {
                        const key = `col-${index}`;
                        return (
                            <Col
                                className={c.column}
                                key={key}
                                xs={{ flex: '90%' }}
                                sm={{ flex: '50%' }}
                                md={{ flex: '40%' }}
                                lg={{ flex: '20%' }}
                                xl={{ flex: '10%' }}
                            >
                                Col
                            </Col>
                        );
                    })}
                </Row>
            </div>

            <div>

                <SmileTwoTone />
                <HeartTwoTone twoToneColor="#eb2f96" />
                <CheckCircleTwoTone twoToneColor="#52c41a" />
            </div>

            <div><Space size={20} wrap>
                {new Array(20).fill(null).map((_, index) => (
                    // eslint-disable-next-line react/no-array-index-key
                    <Button key={index}>Button</Button>
                ))}
            </Space></div>
            
        </>
    )
}